<template>
  <div class="container bgf">
    <van-tabs v-model="current"
      type="card"
      class="my-tab">
      <van-tab title="登录">
        <van-field v-model="login.phone"
          clearable
          type="tel"
          label="手机号"
          placeholder="请输入手机号" />
        <van-field v-model="login.password"
          type="password"
          label="密码"
          placeholder="请输入密码" />
        <div class="btn-area">
          <van-button type="danger"
            round
            size="large"
            @click="formSubmitLogin">确定登录</van-button>
        </div>
      </van-tab>

      <van-tab title="注册">
        <van-field v-model="register.phone"
          clearable
          type="tel"
          label="手机号"
          placeholder="请输入手机号" />
        <van-field v-model="register.nickName"
          type="text"
          label="用户"
          placeholder="请输入用户名" />
        <van-field v-model="register.password"
          type="password"
          label="密码"
          placeholder="请输入密码" />
        <!-- <van-field v-model="code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码">
          <van-button slot="button" size="small" :disabled="!!vcodeSend" type="primary" @click="handleCodeSend">{{vcodeText}}</van-button>
        </van-field> -->

        <div class="btn-area">
          <van-button type="danger"
            round
            size="large"
            @click="formSubmitRegister">确定注册</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { isEmpty } from '@/common/validate'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      current: 0, // 0登录,1注册
      code: '',
      vcodeSend: 0, // 0获取验证码,1验证码倒计时,
      vcodeText: '获取验证码',
      hasLogin: false,
      login: {
        // 登录所需参数
        phone: '',
        password: ''
      },
      identifyCode: '', // 验证码
      register: {
        // 注册所需参数
        nickName: '',
        phone: '',
        password: ''
      }
    }
  },
  created() {},
  methods: {
    ...mapMutations(['setUser']),
    /**
     * 登录
     */
    formSubmitLogin() {
      if (!this.login.phone) {
        this.$toast('手机号格式错误')
        return
      }
      // 密码123456
      if (isEmpty(this.login.password)) {
        this.$toast('请输入正确的密码')
        return
      }
      this.$api.auth.login(this.login).then((res) => {
        if (res.code === 200) {
          this.setUser(res.data)
          this.$router.replace({ path: '/home' })
        }
      })
    },
    /**
     * 注册
     */
    formSubmitRegister() {
      if (!this.register.phone) {
        this.$toast('手机号格式错误')
        return
      }
      // 密码123456
      if (isEmpty(this.register.password)) {
        this.$toast('请输入正确的密码')
        return
      }
      // 用户名
      if (this.current && isEmpty(this.register.nickName)) {
        this.$toast('请输入用户名')
        return
      }
      this.$api.auth.register(this.register).then((res) => {
        if (res.code === 200) {
          this.current = 0
        }
      })
      // 短信验证码4位数字
      // if (this.current && !/^\d{4}$/.test(this.code)) {
      //   this.$toast('请输入正确的验证码')
      //   return
      // }
    }
    // handleCodeSend() {
    //   if (!isPhone(this.phone)) {
    //     this.$toast('手机号格式错误')
    //     return
    //   }
    //   if (this.vcodeSend === 1) {
    //     return
    //   }
    //   console.log('发送验证码')
    // }
  }
}
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    padding: 50px 0 20px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .logo {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    text-align: center;
  }
  .btn-area {
    // width: 80%;
    margin: 30px auto;
  }
  .my-tab .van-tab__pane {
    padding: 20px 15px;
  }
</style>

